<template>
  <!-- 随机管理区域 -->
  <div style="padding-bottom: 15px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>随记管理</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="DialogArticleForm = true"
          >添加随记</el-button
        >
      </div>
      <el-table :data="ArticleData" style="width: 100%">
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ArticleId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ArticleTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片地址" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ArticleUrl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" width="120" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{ scope.row.ArticleDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="导语" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ArticleIntroduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="内容" width="300" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ArticleContext }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="ArticleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="ArticleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 增加图片弹出框 -->
    <el-dialog title="随记信息" :visible.sync="DialogArticleForm">
      <el-form :model="ArticleForm">
        <el-form-item label="编号" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片地址" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleUrl"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布日期" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleDate"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="导语" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleIntroduction"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="AllFormWidth">
          <el-input
            v-model="ArticleForm.ArticleContext"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogArticleForm = false">取 消</el-button>
        <el-button type="primary" @click="ArticleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "AdminArticle",
  data() {
    return {
      // 所有弹出窗宽度
      AllFormWidth: "100px",
      // 图书数据
      ArticleData: [],
      DialogArticleForm: false,
      ArticleForm: {
        id: "",
        ArticleId: "",
        ArticleTitle: "",
        ArticleIntroduction: "",
        ArticleDate: "",
        ArticleUrl: "",
        ArticleContext: "",
      },
    };
  },
  computed: {},
  created() {
    request({
      url: "admin/getcasualrecordpage",
      method: "GET",
    })
      .then((res) => {
        console.log(res);
        if (res.data.code == "200") {
          this.ArticleData = eval(res.data.msg);
          console.log(this.ArticleData);
        } else {
          console.log("获取失败!");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 随记修改
    ArticleEdit() {
      // this.$prompt("请输入内容", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      // })
      //   .then(({ value }) => {
      //     row.Article = value;
      //     // this.LogDate[index].url = value;
      //     // request({
      //     //   url:'/admin/updatehomeindex',
      //     //   method:'PATCH',
      //     //   data: { username: this.forms.username, password: this.forms.password }
      //     // })
      //     // this.$message({
      //     //   type: "success",
      //     //   message: "修改成功",
      //     // });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "取消修改",
      //     });
      //   });
    },
    // 随记删除
    ArticleDelete(index) {
      // console.log(index, row);
      request({
        url: "/admin/deletecasualrecord",
        method: "POST",
        data: { id: this.ArticleData[index]["id"] },
      })
        .then((res) => {
          this.ArticleData.splice(index, 1);
          this.$message({
            type: "info",
            message: "删除成功",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 随记增加
    ArticleAdd() {
      this.DialogArticleForm = false;
      this.ArticleData.push(this.ArticleForm);
      console.log(this.ArticleForm);
      request({
        url: "/admin/addcasualrecord",
        method: "POST",
        data: { message: this.ArticleForm },
      })
        .then((res) => {
          console.log(res);
          this.ArticleForm = {
            ArticleId: "",
            ArticleTitle: "",
            ArticleIntroduction: "",
            ArticleDate: "",
            ArticleUrl: "",
            ArticleContext: "",
          };
          this.$message({
            message: "增添成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>